<template>
  <view id="app" class="app">
    <!-- <image src="../../static/images/venue.png" class="venue" mode="aspectFit" /> -->
    <text class="project">请选择运动项目:</text>

    <view class="select">
      <view class="select-btn" v-for="(item, index) in imgList" :key="index" @click="selectProject(index)">
        <image class="img1" :src="item.img1" mode="aspectFit" />
        <image class="img2" :src="item.img2" mode="aspectFit" />
      </view>
    </view>
  </view>
</template>

<script>
  import {
    gethomepage
  } from "../../api/HomeView/HomeView";

  export default {
    data() {
      return {
        imgList: [
          // {
          //   img1: '../../static/images/basketball-img.png',
          //   img2: '../../static/images/basketball-text.png'
          // },
          // {
          //   img1: '../../static/images/football-img.png',
          //   img2: '../../static/images/football-text.png'
          // },
          // {
          //   img1: '../../static/images/volleyball-img.png',
          //   img2: '../../static/images/volleyball-text.png'
          // },
          // {
          //   img1: '../../static/images/table-img.png',
          //   img2: '../../static/images/table-text.png'
          // },
          // {
          //   img1: '../../static/images/badminton-img.png',
          //   img2: '../../static/images/badminton-text.png'
          // },
          // {
          //   img1: '../../static/images/tennis-img.png',
          //   img2: '../../static/images/tennis-text.png'
          // },
          // {
          //   img1: '../../static/images/archery-img.png',
          //   img2: '../../static/images/archery-text.png'
          // },
          // {
          //   img1: '../../static/images/wushu-img.png',
          //   img2: '../../static/images/wushu-text.png'
          // },
          // {
          //   img1: '../../static/images/taekwondo-img.png',
          //   img2: '../../static/images/taekwondo-text.png'
          // },
          // {
          //   img1: '../../static/images/fencing-img.png',
          //   img2: '../../static/images/fencing-text.png'
          // },
          // {
          //   img1: '../../static/images/yoga-img.png',
          //   img2: '../../static/images/yoga-text.png'
          // },
          // {
          //   img1: '../../static/images/boxing-img.png',
          //   img2: '../../static/images/boxing-text.png'
          // }
        ],
        project: [],
      };
    },
    methods: {
      selectProject(index) {
        uni.navigateTo({
          url: `/reservation/OrderView/OrderView?index=${index}`
        });
      },
      async getGymIndex() {
        try {
          gethomepage().then(res => {
            const data = res.data.data.venues;
            this.imgList = this.imgList.map((obj, index) => {
              const venueData = data[index] || {};
              return {
                ...obj,
                ...venueData
              };
            });
            // console.log(this.imgList);
            // 将数据存储到本地缓存
            uni.setStorageSync('data', this.imgList);
          });

        } catch (error) {
          console.error('请求数据错误:', error);
        }
      },
    },
    onLoad() {
      this.getGymIndex();
    },
  };
</script>

<style scoped>
  .app {
    background: #159B38;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;
    width: 100%;
    height: auto;
    min-height: 100vh;
  }

  .venue {
    margin-top: 50px;
    width: 120px;
    height: 50px;
  }

  .project {
    color: #fff;
    margin: 20px 190px 0 0;
    font-size: 20px;
  }

  .select {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .select-btn {
    margin: 15px 0px;
    width: 155px;
    height: 73px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #17c645;
    border: none;
  }

  .img1 {
    overflow: hidden;
    width: 40px;
    height: 40px;
  }

  .img2 {
    overflow: hidden;
    width: 40px;
    height: 40px;
  }
</style>